<template>
  <div class="main">
    <div :class="['side-box',smallSide?'small-side':'']">
      <div class="logo">
        <div class="img-box">
          <img src="../assets/logo1.png" alt="">
        </div>
        <p class="title">航动智慧工牌</p>
      </div>
      <sideBar />
    </div>
    <div :class="['content-box',smallSide?'big-content':'']">
      <topBar />
      <navBar />
      <div class="content">
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </div>
      
    </div>
  </div>
</template>

<script setup>
  import {computed} from 'vue';
  import sideBar from '@/components/sideBar.vue';
  import topBar from '@/components/topBar.vue';
  import navBar from '@/components/navBar.vue';
  import {useStore} from '../stores/index';
  const store  = useStore();

  let smallSide =computed(()=>{
    return store.menuStatus;
  })

</script>

<style lang="scss" scoped>
  .main {
    display:flex;
    .side-box {
      height: 100vh;
      max-height: 100vh;
      width: 250px;
      transition:all ease 0.3s;
      background: #001529;
      box-shadow: 2px 0 6px rgba(0,21,41,.35);
      .logo {
        width: 80%;
        margin:0 auto;
        padding:20px 0;
        display:flex;
        justify-content: center;
        align-items: center;
        height: 72px;
        .title {
          font-size: 20px;
          // color: rgba(0,0,0,.85);
          font-weight: 600;
          text-align: center;
          color:#fff;
          // background: linear-gradient(120deg, #4abf8a,#fff 30%, #aaa 100%);
          // -webkit-text-fill-color: transparent;
          // -webkit-background-clip: text;
          margin-bottom: 0;
          letter-spacing: 6px;
          transition: all ease 0.3s;
          white-space: nowrap;
        }
        .img-box {
          margin-right: 10px;
          width: 26px;
          img{width: 100%;}
        }
      }
    }
    .small-side {
      width: 80px;
      .logo {
        .title {
          width: 96%;
          font-size: 13px;
          letter-spacing: 2px;
          display: none;
        }
      }
    }

    .content-box {
      width: calc(100vw - 250px);
      
      background: rgb(240,242,245);
      transition:all ease 0.3s;
      .content {
        padding: 20px;
        height: calc(100vh - 106px);
        overflow-y:auto;
      }
    }
    .big-content {
      width: calc(100vw - 80px);
    }
  }
</style>